<template>
    <view class="nearby-container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="placeholder"></view>
            <view class="page-title">附近回收点</view>
            <view class="placeholder"></view>
        </view>

        <!-- 搜索栏 -->
        <view class="search-bar">
            <view class="search-icon">
                <text class="iconfont icon-search"></text>
            </view>
            <input type="text" placeholder="搜索回收点" v-model="searchKeyword" />
        </view>

        <!-- 地图区域 -->
        <view class="map-container">
            <map id="recycleMap" class="map" :latitude="latitude" :longitude="longitude" scale="14"
                :markers="mapMarkers" :show-location="true" @markertap="onMarkerTap"></map>
        </view>

        <!-- 回收点列表 -->
        <view class="list-header">
            附近回收点
        </view>

        <view class="recycle-points-list">
            <view class="recycle-point-item" v-for="(point, index) in filteredPoints" :key="index"
                @click="selectPoint(point)" :class="{ 'active': selectedPointId === point.id }">
                <view class="point-marker">
                    <text class="iconfont icon-dingwei"></text>
                </view>
                <view class="point-info">
                    <view class="point-name">{{ point.name }}</view>
                    <view class="point-address">{{ point.address }}</view>
                    <view class="point-hours">
                        <text class="iconfont icon-time"></text>
                        <text class="hours-text">{{ point.hours }}</text>
                        <text class="status" :class="point.status === '营业中' ? 'open' : 'closed'">{{ point.status
                            }}</text>
                    </view>
                </view>
                <view class="point-distance">{{ point.distance }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            latitude: 39.9042,
            longitude: 116.4074,
            searchKeyword: '',
            selectedPointId: null,
            recyclePoints: [
                {
                    id: 1,
                    name: '朝阳社区回收站',
                    address: '北京市朝阳区建国路88号',
                    hours: '09:00-18:00',
                    status: '营业中',
                    distance: '0.5km',
                    latitude: 39.915,
                    longitude: 116.412
                },
                {
                    id: 2,
                    name: '海淀环保回收点',
                    address: '北京市海淀区中关村大街1号',
                    hours: '08:30-17:30',
                    status: '营业中',
                    distance: '1.2km',
                    latitude: 39.908,
                    longitude: 116.398
                },
                {
                    id: 3,
                    name: '丰台回收服务中心',
                    address: '北京市丰台区丰台路20号',
                    hours: '09:00-17:00',
                    status: '休息中',
                    distance: '3.5km',
                    latitude: 39.892,
                    longitude: 116.385
                }
            ]
        };
    },
    computed: {
        filteredPoints() {
            if (!this.searchKeyword) {
                return this.recyclePoints;
            }

            const keyword = this.searchKeyword.toLowerCase();
            return this.recyclePoints.filter(point =>
                point.name.toLowerCase().includes(keyword) ||
                point.address.toLowerCase().includes(keyword)
            );
        },
        mapMarkers() {
            return this.recyclePoints.map(point => {
                return {
                    id: point.id,
                    latitude: point.latitude,
                    longitude: point.longitude,
                    width: 30,
                    height: 30,
                    callout: {
                        content: point.name,
                        color: '#333333',
                        fontSize: 14,
                        borderRadius: 5,
                        padding: 10,
                        display: this.selectedPointId === point.id ? 'ALWAYS' : 'BYCLICK'
                    },
                    iconPath: this.selectedPointId === point.id ?
                        '/static/images/marker-active.png' :
                        '/static/images/marker.png'
                };
            });
        }
    },
    methods: {

        selectPoint(point) {
            this.selectedPointId = point.id;

            // 移动地图中心到选中的回收点
            this.latitude = point.latitude;
            this.longitude = point.longitude;
        },

        onMarkerTap(e) {
            const markerId = e.markerId;
            const point = this.recyclePoints.find(item => item.id === markerId);

            if (point) {
                this.selectPoint(point);
            }
        },

        // 获取用户当前位置
        getUserLocation() {
            uni.getLocation({
                type: 'gcj02',
                success: (res) => {
                    this.latitude = res.latitude;
                    this.longitude = res.longitude;

                    // 获取真实的附近回收点数据
                    this.getNearbyRecyclePoints();
                },
                fail: () => {
                    uni.showToast({
                        title: '获取位置失败，请检查定位权限',
                        icon: 'none'
                    });
                }
            });
        },

        // 获取附近回收点数据
        getNearbyRecyclePoints() {
            // 实际项目中这里应调用后端API获取附近回收点
            // 这里使用模拟数据
            console.log('获取附近回收点，当前坐标：', this.latitude, this.longitude);
        }
    },
    onLoad() {
        // 页面加载时获取用户位置
        this.getUserLocation();
    }
};
</script>

<style lang="scss">
@import '../../styles/global.scss';

.nearby-container {
    padding-bottom: 40rpx;
    background-color: $bg-color;
    min-height: 100vh;
}

/* 顶部导航 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: $card-bg;
    position: relative;
    border-bottom: 1rpx solid $border-light;

    .back-button {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
            font-size: 36rpx;
            color: $text-black;
        }
    }

    .page-title {
        font-size: 36rpx;
        font-weight: bold;
        color: $text-black;
    }

    .placeholder {
        width: 60rpx;
    }
}

/* 搜索栏 */
.search-bar {
    margin: 20rpx;
    padding: 16rpx 24rpx;
    background-color: $card-bg;
    border-radius: 40rpx;
    display: flex;
    align-items: center;

    .search-icon {
        margin-right: 16rpx;

        .iconfont {
            font-size: 32rpx;
            color: $text-light-gray;
        }
    }

    input {
        flex: 1;
        height: 60rpx;
        font-size: 28rpx;
    }
}

/* 地图容器 */
.map-container {
    margin: 0 20rpx;
    height: 400rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: $card-shadow;

    .map {
        width: 100%;
        height: 100%;
    }
}

/* 列表头部 */
.list-header {
    margin: 30rpx 20rpx 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: $text-black;
}

/* 回收点列表 */
.recycle-points-list {
    margin: 0 20rpx;
}

.recycle-point-item {
    display: flex;
    align-items: flex-start;
    padding: 30rpx;
    background-color: $card-bg;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: $card-shadow;
    position: relative;

    &.active {
        border: 2rpx solid $primary-green;
    }

    .point-marker {
        margin-right: 20rpx;

        .iconfont {
            font-size: 36rpx;
            color: $primary-green;
        }
    }

    .point-info {
        flex: 1;

        .point-name {
            font-size: 30rpx;
            font-weight: bold;
            color: $text-black;
            margin-bottom: 10rpx;
        }

        .point-address {
            font-size: 26rpx;
            color: $text-gray;
            margin-bottom: 10rpx;
        }

        .point-hours {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: $text-light-gray;

            .iconfont {
                margin-right: 8rpx;
            }

            .hours-text {
                margin-right: 10rpx;
            }

            .status {
                padding: 4rpx 12rpx;
                border-radius: 20rpx;
                font-size: 22rpx;

                &.open {
                    background-color: $status-completed-bg;
                    color: $status-completed-text;
                }

                &.closed {
                    background-color: $status-processing-bg;
                    color: $status-processing-text;
                }
            }
        }
    }

    .point-distance {
        position: absolute;
        top: 30rpx;
        right: 30rpx;
        font-size: 26rpx;
        color: $text-light-gray;
    }
}
</style>